@import '../../../../common';

:host {
    height: 100%;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    position: relative;
}

.title {
    height: 38px;
    width: 100%;
    display: flex;
    flex-direction: row;
    align-items: center;
    background-color: $greyBackground !important;
    padding-left: 15px;

    :host-context(.night) & {
        background-color: $darkBackground !important;
        color: $darkTheme_grey_6;
    }
}

.close {
    position: absolute;
    top: 0;
    right: 0;
    height: 36px;
    width: 36px;
    padding: 8px;
    cursor: pointer;

    &:hover {
        color: $darkTheme_grey_5;

        :host-context(.night) & {
            color: white;
        }
    }

    .icon {
        margin: unset;
    }
}

.content {
    flex: 1;
    padding: 20px;

    i {
        padding-left: 5px;
    }
}